import React from 'react'

class ImageFigure extends React.Component {

  handleClick(e) {
    if (this.props.arrange.isCenter) {
      this.props.inverse();
    } else {
      this.props.center();
    }
    e.preventDefault();
    e.stopPropagation();
  }

  render() {
    let styleObj = {};

    //如果props指定了属性, 那么就使用这个属性
    if (this.props.arrange.pos) {
      styleObj.top = this.props.arrange.pos.top;
      styleObj.left = this.props.arrange.pos.left;
      console.log(styleObj.top + "__" + styleObj.left);
    }
    styleObj.transform = 'rotate(' + this.props.arrange.rotate + "deg)";
    if (this.props.arrange.isInverse) {
      styleObj.transform = "translate(320px) rotateY(180deg)";
    }
    if (this.props.arrange.isCenter) {
      styleObj.zIndex = 11;
    }

    return (
      <figure
        className='img-figure'
        onClick={(e) => this.handleClick(e)}
        style={{
          zIndex: styleObj.zIndex,
          top: styleObj.top,
          left: styleObj.left,
          transform: styleObj.transform,
          width: 320,
          transformOrigin: '0 50% 0',
          transformStyle: 'preserve-3d',
          transition: 'transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out',
          height: 360,
          margin: 0,
          cursor: 'pointer',
          tranformStyle: 'preserve-3d',
          padding: 40,
          boxSizing: 'border-box',
          backgroundColor: '#fff',
          position: 'absolute',
        }}>
        <img src={this.props.imageData.img}
             alt={this.props.imageData.title}/>
        <figcaption
          className='figcaption'
          style={{
            textAlign: 'center',
            marginTop: 20,
            color: '#a7a0a2',
            fontSize: 12,
          }}>
          <h2>
            {this.props.imageData.title}
          </h2>
          <div
            className='img-back'
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              padding: '50px 40px',
              overflow: 'auto',
              color: '#a7a0a2',
              fontSize: 22,
              lineHeight: 1.25,
              textAlign: 'left',
              backgroundColor: '#fff',
              boxSizing: 'border-box',
              transform: 'rotateY(180deg) translateZ(1px)',
              backfaceVisibility: 'hidden',
            }}>
            <p style={{magin: 0}}>
              {this.props.imageData.desc}
            </p>
          </div>
        </figcaption>
      </figure>
    );
  }

}

export default ImageFigure